<template>
  <div>
      <div id="mains" style="margin-top:50px" :style="{ width: '500px', height: '300px'}"></div>
  </div>
</template>

<script>
/* import echart from '../dorm/echart/echarts1.vue' */
import * as echarts from "echarts";
export default {
name: "echart",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  comments: {
    echarts,
  },
  methods:{
      show(){

      var chartDom = document.getElementById('mains');
      var myChart = echarts.init(chartDom);
      var option;

option = {
  // color:["#FF0000","#0CCF67"],
  title: {
    text: '异常数据',
    textStyle:{
        color:"white"
               },
    // subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    textStyle:{
                    color:"white"
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        // { value: 1048, name: 'Search Engine' },
        { value: 19, name: '主管风速' ,},
        { value: 19, name: '水流状态' },
        { value: 8, name: '轴承温度' },
        { value: 22, name: '液位状态' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);
      }
  },
  mounted(){
      this.show();
  }
}
</script>

<style scoped>

</style>
